<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			.box {
				width: 327px;
				/* height: 377px; */
				height: 344px;
				border-top: 6px solid #eeeeee;
				background: url(images/bg2.png);
				padding-top: 27px;   
				
				font-size: 12px;
			}
/* 			.box ul {
				margin-top: 27px;
			} */
			.box li img{
				float: left;
				margin-right: 15px;
				margin-left: 1px;
			}
			.item h3{
				font-size: 13px;
			}
			.item h3 span{
				color: #c30310;
				font-weight: 100;
				float: right;
				font-size: 12px;
			}
			.item p{
				line-height: 20px;
				margin-top: 16px;
				margin-bottom: 13px;
				color: #686868;
			}
			.item .cat{
				background: url(images/icon.png) no-repeat left center;
				padding-left:21px ;
				/* text-indent: 21px; */
				line-height: 20px;
				height: 20px;
				display: inline-block;
				color: #303030;
			}
			.flex{
				width: 327px;
				/* height: 377px; */
				height: 344px;
				border-top: 6px solid #eeeeee;
				background: url(images/bg2.png);
				padding-top: 27px;   
				font-size: 12px;
				
				display: flex;
				flex-direction: column;
			}
			.flex li{
				display: flex;
				flex-direction: row;
			}
			.flex>li img{
				margin-right: 15px;
				margin-left: 1px;
			}
			.flex-item h3{
				font-size: 13px;
			}
			.flex-item h3 span{
				color: #c30310;
				font-weight: 100;
				float: right;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<ul class="flex">
			<li>
				<img src="images/img-1.jpg" />
				<div class="flex-item">
					<h3>环太平洋 <span>468人评论过</span></h3>
					<p><a href="#">#内容</a>内容内容内容内容内容内容内容内容内容内容... <a>[详细]</a></p>
					<span class="cat">欧美电影</span>
				</div>
			</li>
			<li>
				<img src="images/img-1.jpg" />
				<div class="flex-item">
					<h3>环太平洋 <span>468人评论过</span></h3>
					<p><a href="#">#内容</a>内容内容内容内容内容内容内容内容内容内容... <a>[详细]</a></p>
					<span class="cat">欧美电影</span>
				</div>
			</li>
			<li>
				<img src="images/img-1.jpg" />
				<div class="flex-item">
					<h3>环太平洋 <span>468人评论过</span></h3>
					<p><a href="#">#内容</a>内容内容内容内容内容内容内容内容内容内容... <a>[详细]</a></p>
					<span class="cat">欧美电影</span>
				</div>
			</li>
			
		</ul>
		<div class="box">
			<ul>
				<li>
					<img src="images/img-1.jpg" />
					<div class="item">
						<h3>环太平洋 <span>468人评论过</span></h3>
						<p><a href="#">#内容</a>内容内容内容内容内容内容内容内容内容内容... <a>[详细]</a></p>
						<span class="cat">欧美电影</span>
					</div>
				</li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
